<template>
    <div>

        <!-- 板块 -->
        <div class="nav">
            <!-- TODO -->
            <div class="radio" v-for="(board, index) in boards" :key="board" @click="getArticlesByBoard(board)">
                <el-button plain>{{ board }}</el-button>
            </div>
        </div>

        <!-- 主要部分 -->
        <!-- 版心 -->
        <div class="container">
            <!-- 左版心 -->
            <div class="container-left">

                <!-- 如果没有文章，就显示空状态 -->
                <el-empty v-show="total == 0" description="当前还没有文章"></el-empty>

                <!-- 帖子 -->
                <div class="card" v-for="(article, index) in articles" :key="article.id">
                    <div class="head">
                        <!-- 头像 -->
                        <img class="photo" src="../assets/logo.png" alt="">
                        <!-- 昵称 -->
                        <span class="nickname">{{ article.nickname }}</span>
                    </div>
                    <div class="body">
                        <!-- 标题 -->
                        <h3 class="title">{{ article.title }}</h3>
                        <!-- 正文 -->
                        <div class="content">
                            {{ article.content }}
                        </div>
                    </div>
                    <div class="footer">
                        <!-- 发布时间 -->
                        <span class="pubTime">{{ article.createTime }}</span>
                        <div class="col">
                            <img src="../assets/img/点赞 (off).png" alt="">
                            <span class="num">{{ article.likeCount }}</span>
                        </div>
                        <div class="col">
                            <img src="../assets/img/收藏 (off).png" alt="">
                            <span class="num">{{ article.collectCount }}</span>
                        </div>
                        <div class="col">
                            <img src="../assets/img/评论.png" alt="">
                            <span class="num">{{ article.commentCount }}</span>
                        </div>
                    </div>
                </div>

                <!-- 处理分页 -->
                <div class="paging">
                    <el-pagination :current-page.sync="curPage" v-show="total != 0" @current-change="changeCurPage"
                        layout="total, prev, pager, next" :page-size="pageSize" :total="total">
                    </el-pagination>
                </div>

            </div>
            <!-- 右版心 -->
            <div class="container-right">
                <el-card class="card">
                    <div slot="header" class="clearfix">
                        <span>热题 Coding</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{ '列表内容 ' + o }}
                    </div>
                </el-card>

                <el-card class="card">
                    <div slot="header" class="clearfix">
                        <span>帖子热度排行榜</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{ '列表内容 ' + o }}
                    </div>
                </el-card>

                <!-- 额外信息 -->
                <div class="other">
                    <div class="master">
                        <i class="el-icon-s-custom"></i>
                        <el-link type="info">站长：陈亦康</el-link>
                    </div>
                    <div class="station">
                        <i class="el-icon-s-marketing"></i>
                        <el-link type="info">关于本站</el-link>
                        <i class="el-icon-warning-outline"></i>
                        <el-link type="info">建议反馈</el-link>
                    </div>
                    <div>
                        <i class="el-icon-s-check"></i>
                        <el-link type="info">2023 Java编程导航鸭</el-link>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import instance from '../utils/request';

export default {
    name: "Index",
    data() {
        return {
            //板块数据(后端)
            boards: [],
            //当前选中的板块名
            selectBoard: '最新', //默认选中最新
            //文章列表数据(后端)
            articles: [],
            //分页处理
            curPage: 1, //当前页码(默认为 1)
            pageSize: 4, //每页显示数量(约定为 4)
            total: 0 //总条数(后端获取)
        }
    },
    methods: {
        /**
         * 初始化板块数据
         */
        initBoards() {
            instance.get("/article/boards").then(success => {
                if (success.data.code == 1000) {
                    this.boards = success.data.data;
                } else {
                    Message.error("板块数据获取错误，请稍后重试");
                    console.log(success.data);
                }
            }).catch(error => {
                Message.error("板块数据获取异常，请稍后重试");
                console.log(error);
            });
        },
        /**
         * 根据板块名获取文章数据
         * @param {*} board 板块名
         */
        getArticlesByBoard(board) {
            this.selectBoard = board;
            instance.get("/article/articles_board?board=" + board + "&curPage=" + this.curPage + "&pageSize=" + this.pageSize).then(success => {
                if (success.data.code == 1000) {
                    this.articles = success.data.data;
                    //获取该板块的总数
                    this.getTotalByBoard(board);
                } else {
                    Message.error("文章数据数据获取错误，请稍后重试");
                    console.log(success.data);
                }
            }).catch(error => {
                Message.error("文章数据获取异常，请稍后重试");
                console.log(error);
            });
        },
        /**
         * 获取该板块的文章总数
         */
        getTotalByBoard(board) {
            instance.get("/article/total_board?board=" + board).then(success => {
                if (success.data.code == 1000) {
                    this.total = success.data.data;
                } else {
                    Message.error("板块总文章数获取错误，请稍后重试");
                    console.log(success.data);
                }
            }).catch(error => {
                Message.error("板块总文章数获取异常，请稍后重试");
                console.log(error);
            });
        },
        /**
         * 用户点击其他页数，触发此方法
         * @param val 当前页数 
         */
        changeCurPage(val) {
            this.curPage = val;
            console.log(val);
            this.getArticlesByBoard(this.selectBoard);
        },
    },
    created() {
        //初始化板块数据
        this.initBoards();
        //初始化文章数据(默认选中板块->最新)
        this.getArticlesByBoard(this.selectBoard);
        //初始化文章总数
        this.getTotalByBoard(this.selectBoard);
    }
}
</script>

<style scoped>
.nav {
    width: calc(100% - 100px);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.nav .radio {
    width: 75px;
    height: 50px;
    padding: 2px;
}

.container {
    width: 1150px;
    height: 600px;
    margin: 5px auto;
    display: flex;
    justify-content: space-between;
}

.container-left {
    overflow: auto;
    width: 840px;
    height: auto;
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.container-right {
    width: 300px;
    height: auto;
    /* background-color: white; */
}

.container-right>.card {
    margin-bottom: 20px;
}

.container-left>.card {
    width: 820px;
    height: auto;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.container-left .head {
    display: flex;
    align-items: center;
}


.card .photo {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-right: 10px;
}

.card .nickname {
    font-weight: 800;
}

.card .title {
    font-weight: 600;
    font-size: 16px;
}

.card .body {
    padding: 20px 0;
}

.card .content {
    padding-top: 10px;
    font-size: 15px;
    line-height: 1.75;
}

.card .pubTime {
    color: rgba(0, 0, 0, .45);
    font-size: 14px;
    line-height: 1.5715;
}

.card .col .num {
    font-weight: 400;
    font-size: 14px;
}

.card .footer {
    display: flex;
    justify-content: left;
}

.card .footer .col {
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.card .footer img {
    width: 15px;
    margin-right: 5px;
}

.paging {
    height: 60px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 图标颜色 */
.container-right .other {
    color: rgb(139, 139, 139);
}

.container-right .other .master {
    padding: 5px 0;
}

.container-right .station {
    padding: 5px 0;
}
</style>

